<script setup lang="ts">
  import { PaginationProps } from '@arco-design/web-vue';

  interface PaginationPropsExt extends PaginationProps {
    total: number;
    pageSize: number;
  }

  withDefaults(
    defineProps<{
      loading?: boolean;
      pagination: PaginationPropsExt;
      data: any[];
      emptyText?: string;
      isEmpty?: boolean;
    }>(),
    {}
  );

  const emits = defineEmits(['pageChange', 'pageSizeChange']);

  const onChange = (...args: any[]) => {
    emits('pageChange', ...args);
  };

  const onSizeChange = (...args: any[]) => {
    emits('pageSizeChange', ...args);
  };
</script>

<template>
  <a-spin class="h-full w-full" :loading="loading">
    <div class="flex flex-col gap-2 h-full">
      <template v-if="!isEmpty">
        <div class="flex-1 overflow-y-auto">
          <slot :data="data"></slot>
        </div>
        <template v-if="pagination.total > pagination.pageSize">
          <a-pagination
            class="self-end"
            v-bind="pagination"
            @change="onChange"
            @page-size-change="onSizeChange"
          />
        </template>
      </template>

      <a-empty v-else class="self-center m-auto">
        {{ emptyText }}
      </a-empty>
    </div>
  </a-spin>
</template>

<style lang="less" scoped></style>
